<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html lang="zh-cn" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

<head>
    <base href="/">
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <title>${book.getTitle()}-880文档</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <meta name="keywords" content="${book.getKeywords()}">
    <meta name="description" content="${book.getDescription()}">
    <meta name="author" content="位中原">
    <title>系统主页 - www.880.xin</title>
    <link href="/common/images/favicon32.ico" rel="icon" type="image/x-icon" />
    <link href="/common/images/favicon32.ico" rel="shortcut icon" type="image/x-icon" >
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">

    <link href="/common/libs/materialdesignicons/materialdesignicons.min.css" rel="stylesheet" type="text/css">
    <link href="/common/libs/bootstrap5.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<#--    <link href="/front/details/css/BookChapterMenu.css" rel="stylesheet" type="text/css">-->
    <link rel="stylesheet" href="/common/libs/ztree/css/metroStyle/metroStyle.css" type="text/css">

    <link href="/front/details/css/style.min.css" rel="stylesheet" type="text/css">

<#--    <#import "/admin/template1.ftl" as template>-->
<#--    <@template.baiduTongji />-->
    <#--    <#include "/admin/template1.ftl">-->
    <#--    <@baiduTongji />-->
</head>
<body>

<div class="container-fluid">
    <div class="row">
        <!--左侧导航-->
        <aside class="col-md-3" style="position: fixed;height:99vh;width:360px;overflow:auto;">

                <div id="left_chapter_menu">
<#--                    <ul id="treeDemo" class="bookChapterEditMenuTree"></ul>-->
                    <ul id="treeDemo" class="ztree"></ul>
                </div>

                <div class="navbar-left wave wave-animate-slow wave-primary">
                    <div class="position-relative">
                        <div class="sidebar-footer">
                            <p class="copyright">
                                <span>Copyright &copy; 2023-现在  位中原- </span>
                                <a target="_blank" href="http://www.880.xin">880</a>
                                <span> 保留所有权利.</span>
                            </p>
                        </div>
                    </div>
                </div>

        </aside>




        <!--页面主要内容-->
        <main class="col-md-9" style="margin-left: 360px;">
<#--            <div id="iframe-content"></div>-->
            <iframe id="chapterContentIframe" src="" onload="setIframeSize(this)"></iframe>
        </main>

        <!--End 页面主要内容-->
    </div>
</div>

<script src="/common/libs/jquery/jquery-3.7.1.min.js" type="text/javascript"></script>
<script src="/common/libs/bootstrap5.3.2/js/bootstrap.min.js" type="text/javascript"></script>
<script src="/common/libs/ztree/js/jquery.ztree.core.min.js" type="text/javascript"></script>
<script src="/front/details/js/index.min.js" type="text/javascript"></script>
<script type="text/javascript">

    function jumpToPage(chapterId) {
        document.getElementById("chapterContentIframe").src="/details/getContentById?contentId="+chapterId;
    }
    function setIframeSize(that){
        $(that).height(document.documentElement.clientHeight);
        $(that).width(document.documentElement.clientWidth-372);  /* 减掉左侧其他组件的宽度及其内外边框宽度 */
    }


    var setting = {
        view: {
            showIcon: false,
        },
        data: {
            simpleData: {
                enable: true
            }
        },
        callback: {
            onClick:leftBookChapterMenuOnMouseDown,
        }
    };
    function leftBookChapterMenuOnMouseDown(event, treeId, treeNode) {
        jumpToPage(treeNode.id);
    }
    var zNodes =[
        <#if chapterList??><#list chapterList as chapter>
        { id:${chapter.id}, pId:${chapter.parentId}, name:"${chapter.title}"},
        </#list></#if>
    ];

    $(document).ready(function(){
        $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        <#if chapterList??><#list chapterList as chapter><#if chapter_index=0>
        jumpToPage(${chapter.id});
        </#if></#list></#if>
    });
</script>
</body>

</html>
